import { defineComponent } from "../../src"


export default defineComponent(props => {
 function valueToPoint(value, index, total) {
    var x = 0
    var y = -value * 0.8
    var angle = ((Math.PI * 2) / total) * index
    var cos = Math.cos(angle)
    var sin = Math.sin(angle)
    var tx = x * cos - y * sin + 100
    var ty = x * sin + y * cos + 100
    return {
      x: tx,
      y: ty
    }
  }    

    return {
        template: `
        <svg width="200" height="200">
            <g>
                <polygon :points="pointsString"></polygon>
                <circle cx="100" cy="100" r="80"></circle>
                <text v-for="{ x, y, label } in points" :x="x" :y="y">{{ label }}</text>
            </g>
        </svg>
        <!-- controls -->
        <div v-for="stat in stats">
            <label>{{ stat.label }}</label>
            <input type="range" v-model="stat.value" min="0" max="100"/>
            <span>{{ stat.value }}</span>
            <button @click.prevent="remove(stat)" class="remove">X</button>
        </div>
        <form id="add">
            <input name="newlabel" v-model="newLabel"/>
            <button @click="add">Add a Stat</button>
        </form>
        <pre id="raw">{{ stats }}</pre>
        `,
        data() {
            return {
                newLabel: '',
                stats: [
                { label: 'A', value: 100 },
                { label: 'B', value: 100 },
                { label: 'C', value: 100 },
                { label: 'D', value: 100 },
                { label: 'E', value: 100 },
                { label: 'F', value: 100 }
                ],

                get points() {
                    const total = this.stats.length
                    return this.stats.map((stat, i) => valueToPoint(stat.value, i, total))
                },
                get pointsString() {
                    return this.points.map(({ x, y }) => `${x},${y}`).join(' ')
                }
            }
        },
        methods: {
            add(e) {
                e.preventDefault()
                if (!this.newLabel) return
                this.stats.push({
                    label: this.newLabel,
                    value: 100
                })
                this.newLabel = ''
            },
            remove(stat) {
                if (this.stats.length > 3) {
                    this.stats.splice(this.stats.indexOf(stat), 1)
                } else {
                    alert("Can't delete more!")
                }
            }
        }
    }
})